<template>
  <div class="page-container consult-container">
    <!-- 页面头部 -->
    <PageBanner
      title="在线咨询"
      description="我们随时为您提供专业的技术支持和解决方案咨询"
      background-color="linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%)"
      :height="300"
    />
    
    <div class="consult-content">
      <el-row :gutter="30">
        <!-- 左侧联系信息 -->
        <el-col :xs="24" :sm="24" :md="10">
          <div class="info-card">
            <h2 class="card-title">联系方式</h2>
            <div class="info-list">
              <div class="info-item">
                <el-icon><Location /></el-icon>
                <div class="item-content">
                  <h3>公司地址</h3>
                  <p>陕西省西安市高新区锦业路76号瞪羚谷A座</p>
                </div>
              </div>
              <div class="info-item">
                <el-icon><Phone /></el-icon>
                <div class="item-content">
                  <h3>联系电话</h3>
                  <p>029-88776655</p>
                </div>
              </div>
              <div class="info-item">
                <el-icon><Message /></el-icon>
                <div class="item-content">
                  <h3>电子邮箱</h3>
                  <p>contact@liwang.com</p>
                </div>
              </div>
              <div class="info-item">
                <el-icon><Clock /></el-icon>
                <div class="item-content">
                  <h3>工作时间</h3>
                  <p>周一至周五 9:00-18:00</p>
                </div>
              </div>
            </div>
            <!-- 地图容器 -->
            <div class="map-container" id="map-container"></div>
          </div>
        </el-col>
        
        <!-- 右侧咨询表单 -->
        <el-col :xs="24" :sm="24" :md="14">
          <div class="form-card">
            <h2 class="card-title">在线咨询</h2>
            <el-form 
              ref="consultFormRef"
              :model="formData"
              :rules="formRules"
              label-position="top"
              size="default"
            >
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="姓名" prop="name" class="form-item-with-label">
                    <el-input v-model="formData.name" placeholder="请输入您的姓名" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="公司名称" prop="company" class="form-item-with-label">
                    <el-input v-model="formData.company" placeholder="请输入您的公司名称" />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row :gutter="20" style="margin-top: 30px;">
                <el-col :span="12">
                  <el-form-item label="联系电话" prop="phone" class="form-item-with-label">
                    <el-input v-model="formData.phone" placeholder="请输入联系电话" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="电子邮箱" prop="email" class="form-item-with-label">
                    <el-input v-model="formData.email" placeholder="请输入电子邮箱" />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-form-item label="咨询类型" prop="type" class="form-item-with-label" style="margin-top: 30px;">
                <el-select v-model="formData.type" placeholder="请选择咨询类型" class="w-100">
                  <el-option label="产品咨询" value="product" />
                  <el-option label="技术支持" value="support" />
                  <el-option label="商务合作" value="business" />
                  <el-option label="其他" value="other" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="咨询内容" prop="content" class="form-item-with-label" style="margin-top: 30px;">
                <el-input
                  v-model="formData.content"
                  type="textarea"
                  :rows="4"
                  placeholder="请详细描述您的需求..."
                  resize="none"
                />
              </el-form-item>
              
              <div class="form-buttons" style="margin-top: 30px;">
                <el-button type="primary" size="large" @click="submitForm">
                  <el-icon class="el-icon--left"><Message /></el-icon>
                  提交咨询
                </el-button>
                <el-button size="large" @click="resetForm">重置</el-button>
              </div>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Location, Phone, Message, Clock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { submitContactForm } from '@/api/contact'
import PageBanner from '@/components/PageBanner.vue'
import { initAMap } from '@/config/map'

// 地图相关
const initMap = () => {
  initAMap('map-container')
}

onMounted(() => {
  initMap()
})

const consultFormRef = ref(null)

const formData = reactive({
  name: '',
  company: '',
  phone: '',
  email: '',
  type: '',
  content: ''
})

const formRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  company: [
    { required: true, message: '请输入公司名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择咨询类型', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入咨询内容', trigger: 'blur' },
    { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
  ]
}

const submitForm = async () => {
  if (!consultFormRef.value) return
  
  await consultFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      try {
        await submitContactForm({
          ...formData,
          title: '在线咨询',
          department: ''
        })
        ElMessage.success('提交成功，我们会尽快与您联系')
        resetForm()
      } catch (error) {
        console.error('提交失败:', error)
        ElMessage.error('提交失败，请稍后重试')
      }
    } else {
      console.log('验证失败:', fields)
    }
  })
}

const resetForm = () => {
  if (consultFormRef.value) {
    consultFormRef.value.resetFields()
  }
}
</script>

<style lang="scss" scoped>
.consult-container {
  position: relative;
  padding: 0;
  background-color: #f8f9fa;
  
  .consult-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px;
    position: relative;
    z-index: 1;
    
    .info-card,
    .form-card {
      background: #fff;
      border-radius: 12px;
      padding: 25px;
      height: 100%;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      
      .card-title {
        font-size: 20px;
        font-weight: 600;
        color: #2c3e50;
        margin: 0 0 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid #eee;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -1px;
          left: 0;
          width: 40px;
          height: 2px;
          background: #4CAF50;
        }
      }
    }
    
    .info-list {
      margin-bottom: 20px;
      
      .info-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 14px;
        padding: 8px;
        border-radius: 8px;
        transition: all 0.3s ease;
        
        &:hover {
          background: rgba(76, 175, 80, 0.05);
        }
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .el-icon {
          font-size: 18px;
          color: #4CAF50;
          margin-right: 10px;
          margin-top: 2px;
        }
        
        .item-content {
          h3 {
            font-size: 15px;
            font-weight: 600;
            color: #2c3e50;
            margin: 0 0 4px;
          }
          
          p {
            font-size: 14px;
            color: #606266;
            margin: 0;
            line-height: 1.5;
          }
        }
      }
    }
    
    .map-container {
      width: 100%;
      height: 220px;
      border-radius: 8px;
      overflow: hidden;
      margin-top: 20px;
    }
    
    .form-card {
      position: relative;
      padding-bottom: 90px;
      
      :deep(.form-item-with-label) {
        margin-bottom: 20px;
        
        .el-form-item__label {
          padding-bottom: 8px;
          line-height: 1.4;
          font-size: 14px;
          font-weight: 500;
          color: #2c3e50;
        }
        
        .el-input__wrapper {
          padding: 0 12px;
          height: 40px;
        }
      }
      
      :deep(.el-input__wrapper),
      :deep(.el-textarea__inner),
      :deep(.el-select .el-input__wrapper) {
        font-size: 14px;
        box-shadow: 0 0 0 1px #dcdfe6 inset;
        border-radius: 4px;
        transition: all 0.3s ease;
        
        &:hover {
          box-shadow: 0 0 0 1px #4CAF50 inset;
        }
        
        &.is-focus {
          box-shadow: 0 0 0 1px #4CAF50 inset;
        }
      }
      
      :deep(.el-textarea__inner) {
        padding: 10px 12px;
        line-height: 1.6;
      }
      
      .form-buttons {
        position: absolute;
        bottom: 25px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 25px;
        
        .el-button {
          min-width: 120px;
          height: 40px;
          font-size: 14px;
          border-radius: 4px;
          margin: 0 12px;
          padding: 0 25px;
          
          &--primary {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            border: none;
            
            &:hover {
              transform: translateY(-1px);
              box-shadow: 0 4px 8px rgba(76, 175, 80, 0.2);
            }
          }
          
          &:not(.el-button--primary) {
            border-color: #dcdfe6;
            
            &:hover {
              border-color: #4CAF50;
              color: #4CAF50;
            }
          }
        }
      }
    }
  }
  
  @media (max-width: 768px) {
    .consult-content {
      padding: 15px;
      
      .info-card,
      .form-card {
        padding: 15px;
        padding-bottom: 80px;
        margin-bottom: 15px;
      }
      
      .form-card {
        :deep(.form-item-with-label) {
          margin-bottom: 15px;
        }
        
        .form-buttons {
          bottom: 20px;
          padding: 0 15px;
        }
      }
    }
  }
}

.w-100 {
  width: 100%;
}
</style> 